<template>
  <div id="assetsList">
    <!-- 布告栏 -->
    <div class="notice">
      <p class="name">{{ noticeMsg.name }}</p>
      <p class="content">{{ noticeMsg.content }}</p>
    </div>
    <!-- 主内容 -->
    <div class="container">
      <!-- 添加模块 -->
      <div class="add">
        <img src="../../assets/images/路径 copy.png" alt="新建" />
        <button @click="handleAdd">添加发送账号</button>
      </div>
      <!-- 查询模块 -->
      <div class="query">
        <div class="item1">
          <label>发送账号</label>
          <Input class="input" v-model="queryInfo.query" placeholder="请输入" />
        </div>
        <div class="item2">
          <label>所属客户</label>
          <Input class="input" v-model="queryInfo.query" placeholder="请输入" />
        </div>
        <div class="item3">
          <label>更新时间</label>
          <Input class="input" v-model="queryInfo.query" placeholder="请输入" />
        </div>
        <div class="item4">
          <Button class="but1" type="primary">查询</Button>
          <Button class="but2">重置</Button>
        </div>
      </div>
      <!-- 列表模块 -->
      <div class="table">
        <Table class="item" :columns="Columns" :data="getAssetsData">
          <template slot-scope="{ index }" slot="action">
            <a style="margin-right: 5px;color:#337DFF;" @click="show(index)"
              >编辑</a
            >
            <a style="color:#337DFF;" @click="remove(index)">删除</a>
          </template>
        </Table>
        <!-- 分页模块 -->
        <div class="Page">
          <div class="Left">
            <div class="count">共{{ dataCount }}条记录</div>
            <div class="selectgroup">
              每页显示
              <Select
                class="select"
                @on-change="changePageSize"
                placeholder="3"
              >
                <Option
                  v-for="item in cityList"
                  :value="item.value"
                  :key="item.value"
                  >{{ item.label }}</Option
                >
              </Select>
              条
            </div>
          </div>
          <div class="Right">
            <Page
              :id="pageId"
              class="pageitem"
              show-elevator
              :total="dataCount"
              :current.sync="currentPage"
              :page-size="queryInfo.pagesize"
              @on-change="pindexChange"
              @on-page-size-change="pSizeChange"
            ></Page>
            <Button class="btn" @click="goTo(pageId)">GO</Button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "assetsList",
  data() {
    return {
      noticeMsg: {
        name: "共享发送账号",
        content:
          "我是共享发送账号名称我是共享发送账号名称我是共享发送账号名称（通知短信）",
      },
      pageId: "targetpage",
      dataCount: 0,
      currentPage: 1,
      // 查询并分页展示信息
      queryInfo: {
        query: "",
        pagenum: 1,
        pagesize: 3,
      },
      // 每页显示多少条
      cityList: [
        {
          value: "3",
          label: "3",
        },
        {
          value: "6",
          label: "6",
        },
        {
          value: "9",
          label: "9",
        },
        {
          value: "12",
          label: "12",
        },
        {
          value: "15",
          label: "15",
        },
        {
          value: "18",
          label: "18",
        },
      ],
      Columns: [
        {
          title: "发送账号名称",
          key: "sendMsgName",
          align: "center",
        },
        {
          title: "发送账号密码",
          key: "sendPwd",
          align: "center",
        },
        {
          title: "发送账号类型",
          key: "type",
          align: "center",
        },
        {
          title: "登录账号名称",
          key: "loginName",
          align: "center",
        },
        {
          title: "登录账号密码",
          key: "loginPwd",
          align: "center",
        },
        {
          title: "所属客户",
          key: "user",
          align: "center",
        },
        {
          title: "更新时间",
          key: "date",
          width: 110,
          align: "center",
        },
        {
          title: "操作人",
          key: "operator",
          width: 80,
          align: "center",
        },
        {
          title: "操作",
          slot: "action",
          width: 90,
          align: "center",
        },
      ],
      getAssetsData: [],
    };
  },
  watch: {
    queryInfo: {
      deep: true,
      handler(newVal, oldVal) {
        this.getAssetsLists();
      },
    },
  },
  methods: {
    //自定义函数---获取资产分页数据
    async getAssetsLists() {
      let result = await this.$http.get("/api/assetsLists", {
        params: this.queryInfo,
      });
      this.getAssetsData = result.data.data;
      this.dataCount = result.data.total;
    },
    //添加发送账号
    handleAdd() {
      this.$router.push("/assetsAdd");
    },
    // 改变一页信息数目
    changePageSize(value) {
      this.currentPage=1;
      this.queryInfo.pagesize = Number.parseInt(value);
    },
    // 页面显示条数改变
    pSizeChange(value) {
      this.queryInfo.pagesize = Number.parseInt(value);
    },
    // 页码改变
    pindexChange(index) {
      this.queryInfo.pagenum = Number.parseInt(index);
    },
    //跳转至制定页码
    goTo() {
      var evtObj;
      var thisPage = document.getElementById(this.pageId);
      var elevatorDiv = thisPage.getElementsByClassName(
        "ivu-page-options-elevator"
      );
      if (elevatorDiv && elevatorDiv.length > 0) {
        var pageInput = elevatorDiv[0].getElementsByTagName("input")[0];
        if (window.KeyEvent) {
          //firefox 浏览器下模拟事件
          evtObj = document.createEvent("KeyEvents");
          evtObj.initKeyEvent(
            "keyup",
            true,
            true,
            window,
            true,
            false,
            false,
            false,
            13,
            0
          );
        } else {
          //chrome 浏览器下模拟事件
          evtObj = document.createEvent("UIEvents");
          evtObj.initUIEvent("keyup", true, true, window, 1);
          delete evtObj.keyCode;
          if (typeof evtObj.keyCode === "undefined") {
            //为了模拟keycode
            Object.defineProperty(evtObj, "keyCode", { value: 13 });
          } else {
            evtObj.key = String.fromCharCode(13);
          }
        }
        pageInput.dispatchEvent(evtObj);
      }
    },
    show(index) {
      this.$Modal.confirm({
        title: "编辑操作可能会影响客户短信发送，请谨慎操作",
        onOk: () => {
          // this.$Message.info("删除成功");
          // this.getAssetsData.splice(index, 1);
          this.$Message.info("保存编辑");
        },
        onCancel: () => {
          this.$Message.info("取消编辑");
        },
      });
    },
    remove(index) {
      this.$Modal.confirm({
        title: "确定删除该子账号吗？",
        onOk: () => {
          this.$Message.info("删除成功");
          this.getAssetsData.splice(index, 1);
        },
        onCancel: () => {
          this.$Message.info("取消删除");
        },
      });
    },
  },
  mounted() {
    this.getAssetsLists();
  },
};
</script>

<style scoped>
/* 概览页---头部 */
#assetsList {
  width: 100%;
  height: 100%;
  margin-top: 70px;
}
/* 布告栏 */
.notice {
  width: 97%;
  height: 70px;
  line-height: 70px;
  margin: 10px auto;
  background: #ffffff;
  border-radius: 2px;
}
.notice > p {
  display: inline-block;
}
.notice > p:first-child {
  width: 72px;
  height: 30px;
  margin-left: 30px;
  font-family: PingFangSC-Regular;
  font-size: 12px;
  color: #999999;
  letter-spacing: 0;
  text-align: justify;
  line-height: 30px;
  font-weight: 400;
}
.notice > p:last-child {
  width: 505px;
  height: 30px;
  margin-left: 20px;
  font-family: PingFangSC-Regular;
  font-size: 12px;
  color: #333333;
  letter-spacing: 0;
  text-align: justify;
  line-height: 18px;
  font-weight: 400;
}
/* 主内容 */
.container {
  width: 97%;
  padding-bottom: 40px;
  margin: 10px auto;
  background: #ffffff;
  border-radius: 2px;
}
.container > .add {
  width: 113px;
  height: 32px;
  line-height: 32px;
  display: inline-block;
  vertical-align: middle;
  background: #337dff;
  border-radius: 2px;
  margin: 20px 0px 10px 20px;
}
.container > .add > img {
  width: 14px;
  height: 14px;
  margin: 0px 5px 0px 10px;
  vertical-align: middle;
}
.container > .add > button {
  border: none;
  background: #337dff;
  width: 74px;
  height: 20px;
  font-family: PingFangSC-Regular;
  font-size: 12px;
  color: #ffffff;
  line-height: 20px;
  font-weight: 400;
  vertical-align: middle;
}
/* 查询栏 */
.container > .query {
  width: 96%;
  height: 72px;
  line-height: 72px;
  vertical-align: middle;
  /* margin: 2% 2%; */
  margin: 0px 20px;
  padding: 0px 20px;
  border: 1px solid #e5e5e5;
}
/* 将多个item进行一行排列且设置一个弹性的宽度 */
.container > .query > .item1,
.container > .query > .item2,
.container > .query > .item3,
.container > .query > .item4 {
  display: inline-block;
  height: 72px;
  width: 25%;
}
/* 设置item1,item2,item3的样式 */
.container > .query > .item1 > label,
.container > .query > .item2 > label,
.container > .query > .item3 > label {
  font-family: PingFangSC-Regular;
  margin-right: 10px;
  font-size: 12px;
  color: #333333;
  font-weight: 400;
  vertical-align: middle;
}
.container > .query > .item1 > .input,
.container > .query > .item2 > .input,
.container > .query > .item3 > .input {
  display: inline-block;
  width: 70%;
  vertical-align: middle;
}
/* item4中的按钮样式,公共样式 */
.container > .query > .item4 {
  text-align: right;
}
.container > .query > .item4 > .but1,
.container > .query > .item4 > .but2 {
  width: 54px;
  height: 32px;
  border-radius: 2px;
  font-family: MicrosoftYaHei;
  font-size: 12px;
  font-weight: 400;
}
.container > .query > .item4 > .but1 {
  color: #ffffff;
  margin-right: 5%;
}
.container > .query > .item4 > .but2 {
  color: #555555;
}
/* 列表模块 */
.container > .table > .item {
  margin: 10px 20px;
}
.container > .table > .item >>> .ivu-table {
  font-family: PingFangSC-Regular;
  color: #333333;
  font-weight: 400;
  font-size: 12px;
}
/* Page分页模块 */
.container > .table > .Page {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin: 10px 20px;
}
/* Page分页模块---左边 */
.container > .table > .Page > .Left {
  height: 28px;
  font-family: PingFangSC-Regular;
  font-size: 12px;
  color: #333333;
  letter-spacing: 0;
  font-weight: 400;
}
.container > .table > .Page > .Left > div {
  display: inline-block;
}
.container > .table > .Page > .Left > .count {
  margin-right: 10px;
}
.container > .table > .Page > .Left > .selectgroup > .select {
  width: 51px;
  height: 28px;
}
.container
  > .table
  > .Page
  > .Left
  > .selectgroup
  > .select
  >>> .ivu-select-selection {
  display: inline-block;
  width: 51px;
  height: 28px;
  text-align: center;
}
/* Page分页模块----右边 */
.container > .table > .Page > .Right {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.container > .table > .Page > .Right > .pageitem >>> li {
  width: 28px;
  height: 28px;
  line-height: 28px;
}
.container > .table > .Page > .Right >>> .ivu-page-options-elevator > input {
  width: 46px;
  height: 28px;
  background: #ffffff;
  border: 1px solid #d9d9d9;
  border-radius: 2px;
  text-align: center;
}
.container > .table > .Page > .Right > .elevator > input:focus {
  border: 1px solid #337dff;
  outline: none;
}
.container > .table > .Page > .Right > .btn {
  width: 49px;
  height: 28px;
  text-align: center;
  margin-left: 10px;
}
</style>
